<template>
    <div class="login">
        <div class="wrapper">
            <div class="login-box">
                <div class="title">登录页面</div>
                <div>
                    <div>
                        <input
                            type="text"
                            class="phone"
                            placeholder="手机号"
                            v-model="phone"
                        />
                    </div>
                    <div>
                        <input
                            type="password"
                            class="password"
                            placeholder="密码"
                            v-model="password"
                        />
                    </div>
                    <!-- <span>
                        <input type="text" class="check" placeholder="验证码"><button class="btn3"><a href="">发送验证码</a></button>
                    </span> -->
                </div>
                <div class="btn">
                    <button type="submit" class="btn1" @click="send()">
                        登录
                    </button>
                    <button type="" class="btn2">
                        <router-link to="/register">注册</router-link>
                    </button>
                </div>
            </div>
            <div class="forpaw">
                <router-link to="/repassword" class="color"
                    >忘记密码</router-link
                >
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            phone: "",
            password: "",
        };
    },
    methods: {
        //   this.$axios({
        //     methods: "post",
        //     url: "http://10.8.243.25:8081/login",
        //     dataType:'JSONP',
        //     data: {
        //         phone:this.phone,
        //         password:this.password
        //     }
        //   })
        //     .then((res) => {
        //         console.log(res)
        //     })
        //     .catch((err) => {
        //         console.log("错误")
        //          console.log(res)
        //     });
        send() {
            let obj = {
                phone: this.phone,
                password: this.password,
            };
            console.log(obj);
            let res = JSON.stringify(obj);
            let xhr = new XMLHttpRequest();
            // 接口1
            xhr.open("POST", "http://localhost:8081/login", true); //存储 //携带cookie，但是客户端和服务端交互的时候使用的是 token，没有必要使用cookie // xhr.withCredentials = true // xhr.withCredentials = true //获取到的返回数据
            xhr.onreadystatechange = function() {
                //在本地的sessionStorage设置loginreturn的键值对
                // sessionStorage.setItem('loginreturn',xhr.responseText);
                // //通过键值对获取sessionStorage的暂时缓存
                // console.log(sessionStorage.getItem('loginreturn'));
                // //通过这个语句清空sessionStorage的暂时缓存
                // sessionStorage.clear()
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        if (xhr.responseText == "用户名不存在") {
                            console.log("用户名不存在");
                        } else if (xhr.responseText == "密码错误") {
                            console.log("密码错误");
                        } else {
                            localStorage.setItem(
                                "token",
                                xhr.getResponseHeader("token")
                            );
                            console.log(xhr.getResponseHeader("token")); // localStorage.setItem("token",xhr.getResponseHeader("token"))
                            window.location.href =
                                "http://localhost:8080" + xhr.responseText;
                        }
                    }
                }
            };

            xhr.send(res);
        },
    },
};
</script>
<style lang="scss" scoped>
.login {
    position: absolute;
    width: 100%;
    height: 100%;
    //  background-color:rgb(32, 32, 32);
    // min-height: 900px;
    background-image: url(../assets/img/bg.jpg);
    background-size: 100% 100%;
    background-repeat: repeat;
    display: flex;
    justify-content: center;
}
.wrapper {
    position: absolute;

    .login-box {
        margin-top: 180px;
        width: 390px;
        height: 360px;
        text-align: center;
        font-size: 20px;
        input {
            box-sizing: border-box;
            padding-left: 10px;
            margin-top: 36px;
            width: 300px;
            height: 38px;
            border-radius: 6px;
            border: 2px solid black;
            background-color: transparent;
            font-size: 20px;
            font-family: "宋体";
            color: grey;
        }
        input::-webkit-input-placeholder {
            color: grey;
            font-weight: bold;
            font-size: 20px;
        }
        input:-moz-placeholder {
            /* Firefox 18- */
            color: grey;
            font-weight: bold;
            font-size: 20px;
        }
        input::-moz-placeholder {
            /* Firefox 18- */
            color: grey;
            font-weight: (240, 177, 96);
            font-size: 20px;
        }
        // ::-webkit-input-placeholder {
        //         /* Chrome/Opera/Safari */
        //         color: white;
        //     }

        //     ::-moz-placeholder {
        //         /* Firefox 19+ */
        //         color:white;
        //     }

        //     :-ms-input-placeholder {
        //         /* IE 10+ */
        //         color: white;
        //     }

        //     :-moz-placeholder {
        //         /* Firefox 18- */
        //         color:white;
        //     }
        .check {
            width: 210px;
        }

        .btn {
            .btn1 {
                width: 75%;
                height: 40px;
                margin: 30px 0px 0px 0px;
                background-color: rgb(43, 175, 43);
                border: 1px solid rgb(43, 175, 43);
                border-radius: 6px;
                color: white;
            }
            .btn2 {
                width: 75%;
                height: 40px;
                margin: 20px 0px 0px 0px;
                background-color: white;
                border: 1px solid rgb(237, 237, 237);
                border-radius: 6px;
                text-decoration: none;
                a {
                    text-decoration: none;
                }
            }
        }
        .btn3 {
            height: 44px;
            border-radius: 4px;
            a {
                text-decoration: none;
            }
            a:visited {
                color: chocolate;
                text-decoration: none;
            }
        }
    }
}
.title {
    color: black;
    font-weight: bolder;
    font-family: "微软雅黑";
    letter-spacing: 4px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 36px;
    user-select: none;
}
.forpaw {
    font-size: 16px;
    color: black;
    float: right;
    margin-right: 50px;
    margin-top: 0px;
    .color:visited {
        text-decoration: none;
        color: black;
    }
    .color:hover {
        color: blue;
    }
}
</style>
